<template>
  <div class="register-container">
    <el-form ref="refForm" :model="registerForm" :rules="registerRules" size="small" status-icon class="login-box" label-width="100px">
      <h3 class="login-title">欢迎注册MyBlog</h3>
      <el-form-item label="邮箱：" prop="email">
        <el-input type="text" placeholder="请输入邮箱" v-model="registerForm.email" />
      </el-form-item>
      <el-form-item label="昵称：" prop="username">
        <el-input type="text" placeholder="请输入昵称" v-model="registerForm.username" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input type="password" show-password placeholder="请输入密码" v-model="registerForm.password" />
      </el-form-item>
      <el-form-item label="确认密码：" prop="checkPassword">
        <el-input type="password" show-password placeholder="确认密码" v-model="registerForm.checkPassword" />
      </el-form-item>
      <el-button type="primary" style="width: 100%;" size="medium" @click="submitForm('refForm')" :loading="loading">
        <span>立即注册</span>
      </el-button>
      <el-form-item>
        <div style="float: right; margin-top: 10px;">已有帐号，<a href="/login">立即登录</a></div>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import {addUser,verifyUsername} from "../../api/system/user";

  export default {
    data() {
      // 校验确认密码
      let validateCheckPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
      return {
        registerForm: {
          username: '',
          password: '',
          email: '',
          checkPassword: '',
        },
        registerRules: {
          username: [
            { required: true,message: '请输入用户名',  trigger: 'blur' },
            { min: 2, max: 6, success: 'sss' , message: '长度在 2 ~ 6 个字符', trigger: 'blur' },
            {validator: 'checkExistOfUserName',message: '用户名已存在'},
          ],
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ],
          password: [
            {required: true, message: "请输入密码", trigger: 'blur' },
            { min: 6, max: 16, message: '长度在 6 ~ 16 个字符', trigger: 'blur' }
          ],
          checkPassword: [
            {required: true, validator: validateCheckPass, trigger: 'blur' }
          ],
        },
        loading: false
      }
    },
    methods: {
      // 校验用户名是否存在
      checkExistOfUserName(username){
        verifyUsername(username).then( (response) => {
          console.log("response.data", response.data);
        })
      },
      submitForm(refForm) {
        this.loading = true
        this.$refs[refForm].validate((valid) => {
          if (valid) {
            verifyUsername(this.registerForm.username).then((response) => {
              if(response.data.code ==200){
                addUser(this.registerForm).then( res =>{
                  if(res.data.code == 200){
                    this.$message.success("注册成功！！！")
                    this.$router.push("/login")
                    this.loading = false
                  }else {
                    this.$message.error("注册失败！！！")
                    this.loading = false
                  }
                })
              }
            })
          } else {
            this.loading = false
            return false;
          }
        });
      }
    }
  }
</script>


<style lang="scss" scoped>
  #particles-js {
   width: 100%;
   height: calc(100% - 100px);
   position: absolute;
  }
  .register-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(224, 228, 232);
  }
  .login-box{
    border: 1px solid #DCDEF6;
    background-color: white;
    width: 400px;
    margin: 100px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
  a {
    cursor: pointer;
    text-decoration: none;
    color: #3494fc;
  }
</style>
